<template>

  <div class="head">
    <div class="avatar">
      <van-image
        round
        width="100"
        height="100"
        fit="cover"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
    </div>
    <div class="head-text">
      <span class="name-text">{{me.username}}</span>
      <div class="name-text">手机号：{{me.phone}}</div>
      <div class="name-text">余额：{{me.money}}</div>
    </div>
  </div>
  <div class="options">
    <van-cell-group>
      <van-cell title="我的订单" is-link to="/order-list" />
      <van-cell title="发货列表" is-link to="/wait-send" />
      <van-cell title="我的商品" is-link to="/mygoods" />
      <van-cell title="完善提款信息" is-link to="/wallet" />
      <van-cell title="提现" is-link to="/withdraw" />
      <van-cell title="投诉" is-link to="/complain-list" />
      <van-cell title="修改密码" is-link to="/update-password" />
      <van-cell title="关于我们" value="XXX游戏账号交易" />
    </van-cell-group>
  </div>
  <div class="options">
    <van-button type="primary" size="normal" block @click="logout">退出登录</van-button>
  </div>
</template>

<script>
import {Toast} from "vant";
import {user} from "@/api/user";

export default {
  name: "My",
  data(){
    return {
      me:{
        username:"",
        phone:"",
        money:0
      },
    }
  },
  created() {
    if(this.$store.state.token=="" || this.$store.state.token==null ){
      Toast.fail("请先登录");
      this.$router.push('login')
    }
    user().then((res)=>{
      this.me.username = res.data.username
      this.me.phone = res.data.phone
      this.me.money = res.data.money
    })

  },
  methods:{
    logout(){
      this.$store.commit("CLEAR_TOKEN")
      this.$router.push('login')
    }
  }
}
</script>

<style scoped>
  .head{
    height: 150px;
    background-image: url("../assets/bg.jpg");
  }
  .avatar{
    float: left;
    margin-top: 25px;
    margin-left: 20px;
  }
  .head-text{
    float: left;
    margin-top: 20px;
    margin-left: 30px;
  }
  .name-text{
    color: #ffffff;
    padding: 10px;
    font-size: 16px;
  }
  .options{
    margin-top: 100px;
  }
</style>
